<template>
  <header fl-r fl-jcsb pa-16 bg-1 bb-4>
    <h1 fl-1>🎨 aoda.css</h1>
    <div class="g-pointer" fl-0 ml-20 us-n @click="toogleTheme">
      {{ theme === 'dark' ? '🌞' : '🌙' }}
    </div>
    <svg-gitee class="g-pointer" fl-0 ml-20 us-n @click="onClickGitee" />
  </header>
</template>

<script setup lang="ts">
import { useTheme } from '@example/use'
import SvgGitee from './svg-gitee.vue'

const { theme, toogleTheme } = useTheme()

function onClickGitee() {
  window.open('https://gitee.com/aodazhang/aoda-css')
}
</script>
